<template>
  <div class="order-measure">
    <!-- 搜索表单 -->
    <div class="search-wrap mt20">
      <SearchForm
        ref="searchFormRef"
        :list="[...formList]"
        @submit="search"
        @reset="reset"
        @daterangeChange="daterangeChange"
      ></SearchForm>
    </div>

    <!-- 今日/昨日/近7日/近30日等，创建订单按钮，关键词搜索 -->
    <div class="center-search-wrap">
      <div>
        <div class="left">
          <div class="date-filter">
            <el-radio-group v-model="postData.date" @change="changeDate">
              <el-radio-button label="今天" :value="0" />
              <el-radio-button label="昨天" :value="1" />
              <el-radio-button label="近7天" :value="7" />
              <el-radio-button label="近30天" :value="30" />
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据列表 -->
    <TableMy :list="list" @refresh="getList" />

    <div class="pt20" style="display: flex; justify-content: flex-end">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="pagination.sizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import moment from "moment";
import SearchForm from "@/components/SearchForm";
import { Edit, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
import TableMy from "./components/Table";
import { getMeasureOrderPage } from "@/apis/order/measure";

const list = ref([]);
const searchFormRef = ref();
const postData = ref({});
const formData = ref({});
const formList = ref([
  {
    label: "供应商",
    model: "factoryName",
    type: "input",
    labelWidth: "110",
    placeholder: "请输入供应商名称"
  },
  {
    label: "关联客户",
    model: "customer",
    type: "input",
    labelWidth: "100",
    placeholder: "请输入客户姓名或手机号"
  },
  {
    label: "下单时间",
    model: "outTime",
    type: "daterange",
    labelWidth: "70"
  },
  {
    label: "测量预购单编码",
    model: "measureOrderNo",
    type: "input",
    labelWidth: "110"
  },
  {
    label: "关联订单编码",
    model: "orderNo",
    type: "input",
    labelWidth: "100"
  },
  {
    label: "测量时间",
    model: "outTime2",
    type: "daterange",
    labelWidth: "70"
  },
  {
    label: "订单状态",
    model: "businessState",
    type: "select",
    labelWidth: "110",
    data: [
      { label: "待接单", value: 1 },
      { label: "待测量", value: 2 },
      { label: "已测量", value: 3 },
      { label: "已撤销", value: 4 }
    ]
  }
]);
const pagination = ref({
  page: 1,
  size: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0
});

onMounted(() => {
  getList();
  console.log("时间戳===", new Date("2023-04-01 11:20:15").getTime());
});

const getList = () => {
  console.log("请求查询接口===", formData.value);
  getMeasureOrderPage({
    page: pagination.value.page,
    size: pagination.value.size,
    ...formData.value
  }).then(res => {
    if (res.code === 200) {
      list.value = res.data.records;
      // list.value = [{}, {}, {}, {}];
      pagination.value.total = res.data.total;
      console.log("测量单数据===", res.data, list.value);
    }
  });
};
// 表单查询组件submit回调
const search = form => {
  // console.log("查询表单数据===", form);
  if (form) {
    let _form = JSON.parse(JSON.stringify(form));
    // 下单时间
    _form.startTime = form?.outTime ? form?.outTime[0] : null;
    _form.endTime = form?.outTime ? form?.outTime[1] : null;
    // 测量时间
    _form.measureStartTime = form?.outTime2 ? form?.outTime2[0] : null;
    _form.measureEndTime = form?.outTime2 ? form?.outTime2[1] : null;
    delete _form.outTime;
    delete _form.outTime2;
    formData.value = _form;
    // console.log("处理后的数据", formData.value);
  } else {
    formData.value = {};
  }
  nextTick(() => {
    getList();
  });
};
//清空查询表单
const reset = () => {
  search("");
  daterangeChange();
};
const daterangeChange = () => {
  postData.value = { date: null };
};

const changeDate = val => {
  const { start, end } = getTimeRange(val);
  formData.value.startTime = start;
  formData.value.endTime = end;
  getList();
};

const getTimeRange = num => {
  if (num !== null) {
    let start = "";
    let end = "";
    if (num === 0) {
      start = moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"); // 带有时分秒
      end = moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"); // 带有时分秒
    } else if (num === 1) {
      start = moment().subtract(1, "day").startOf("day").format("YYYY-MM-DD HH:mm:ss"); // 带有时分秒
      end = moment().subtract(1, "day").endOf("day").format("YYYY-MM-DD HH:mm:ss"); // 带有时分秒
    } else {
      start = moment()
        .subtract(num - 1, "day")
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss"); // 带有时分秒
      end = moment().format("YYYY-MM-DD HH:mm:ss"); // 带有时分秒
    }

    searchFormRef.value.setFormData("outTime", [start, end]);
    return { start, end };
  }
};

const handleSizeChange = val => {
  pagination.value.size = val;
  getList();
};
const handleCurrentChange = val => {
  pagination.value.page = val;
  getList();
};
</script>

<style lang="scss" scoped>
.order-measure {
  height: calc(100% - 20px);
  overflow-y: auto;
  padding: 0 20px 20px 20px;

  .search-wrap {
    padding: 20px;
    overflow-x: hidden;
    background-color: #f6f8fa;
  }

  .center-search-wrap {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 22;
    & > div {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
    }
    .left {
      :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
        background-color: white;
        color: #007dff;
      }
    }
  }

  .list-wrap {
    .list-item {
      margin-bottom: 20px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #e1e6ed;
      height: calc(100% - 23px);
      header {
        padding: 14px 10px;
        background-color: #f5f7fa;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e1e6ed;
        .name {
          color: #4e5969;
          font-size: 16px;
        }
        .time {
          color: #86909c;
          span {
            color: #3d3d3d;
          }
        }
      }
      .content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        .gray-block {
          background-color: #f5f7fa;
          border-radius: 4px;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          span {
            color: #86909c;
          }
          b,
          :deep(.el-statistic__content) {
            font-weight: bold;
            display: flex;
            font-size: 14px;
            color: #4e5969;
          }
        }
        .left {
          border-right: 1px solid #e1e6ed;
          .time {
            display: flex;
            align-items: center;
            width: 100%;
            & > span {
              width: 60px;
              font-size: 12px;
              color: #86909c;
            }
          }
          :deep(.el-date-editor) {
            flex: 1;
            background-color: white;
          }
        }
        .right {
          & > h3 {
            line-height: 24px;
            height: 24px;
          }
          & > p {
            color: #4e5969;
            span {
              color: #ff3333;
            }
          }
          .count {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }
      }
    }
  }
}
</style>
